<!-- 系统升级 -->
<template>
  <div class="container-app sys-upgrade-wrapper">
    <div class="row head">
      <q-separator vertical size="3px" class="leftLine bg-primary" />
      <span class="q-ml-md name">系统升级</span>
      <q-space />
    </div>
    <div class="container-sys">
      <div class="versions-wrapper">
        <span>版本号：{{ currentVersions }}</span>
      </div>
      <div class="feil-sys-upgrade">
        <span>升级文件</span>
        <span class="input-container">
          <q-input v-model="feilOnlyReadName" outlined dense />
          <q-icon name="close" class="close-upgrade-input" @click="clearfeilName" />
        </span>
        <div class="sys-up-bu">
          <q-file
            ref="upload"
            borderless
            dense
            bg-color="primary"
            v-model="feilName"
            label-color="#fff"
            display-value
            class="upload-demo"
            @update:model-value="uploadFail(feilName)"
          >
            <span class="text-no-wrap select-file" style="color: #fff;">选择升级文件</span>
          </q-file>
          <q-btn
            :disabled="isDisablStart"
            unelevated
            color="primary"
            @click="startSysUpgra"
            class="borderRadius start-sys-update"
            label="开始系统升级"
          />
        </div>
      </div>
      <div class="upgrade-speed">
        <span class="q-mr-xs">升级进度</span>
        <div class="progress_contant q-mr-xs">
          <q-linear-progress
            size="12px"
            class="borderRadius progress-box"
            :value="upgradeProgress.progress"
            color="primary"
          >
            <div class="absolute-full flex flex-center">
              <q-badge color="white" text-color="primary" :label="upgradeProgress.progressLabel" />
            </div>
          </q-linear-progress>
        </div>
        <span>{{ upgradeProgress.stepName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getUpgrapeSys, getPostFile } from 'src/api/systemtWarning'
import { mapGetters } from 'vuex';
export default {
  name: 'UpgradeSystem',
  data() {
    return {
      // 上传文件
      feilName: null,
      feilOnlyReadName: '',
      upgradeProgress: {
        progress: 0,
        progressLabel: 0,
        stepName: ''
      },
      isDisablStart: false
    };
  },

  components: {},

  computed: {
    ...mapGetters(['currentVersions'])
  },

  mounted() {
    this.$store.dispatch('app/getVersion')
  },
  // activated() {
  //   this.clearfeilName()
  // },
  beforeUnmount() {
    clearTimeout(this.progressN)
    this.progressN = null
    clearTimeout(this.startUpgra)
    this.startUpgra = null
  },

  methods: {
    // 上传文件的钩子
    // 覆盖掉默认的上传钩子函数
    uploadFail(item) {
      const fileObj = item
      this.form = new FormData() // formData对象
      this.form.append('file', fileObj)
      this.feilOnlyReadName = item.name
    },
    // 上传选择的文件
    updateFeil() {
      getPostFile(this.form).then(res => {
        if (res.status === 200) {
          if (res.data && res.data.status !== 200) {
            this.$q.notify({
              position: 'top',
              type: 'warning',
              message: res.data.msg
            })
            return
          }
          this.feilName = null
          this.isDisablStart = false
          if (this.startUpgra) {
            clearTimeout(this.startUpgra)
            this.startUpgra = null
          }
        }
      })
      this.startUpgra = setTimeout(() => {
        this.isDisablStart = true
        this.getProUpgr()
      }, 100)
    },
    // 点击‘开始系统升级’按钮
    startSysUpgra() {
      if (!this.form) {
        this.$q.notify({
          type: 'warning',
          position: 'top',
          message: '未选择升级文件！'
        })
        return
      }
      this.updateFeil()
    },
    // 获取升级的进度
    getProUpgr() {
      getUpgrapeSys().then(res => {
        if (res.status === 200) {
          let _upgradeProgress = res.data
          if (_upgradeProgress && _upgradeProgress.progress < 100) {
            this.upgradeProgress.progress = _upgradeProgress.progress / 100
            this.upgradeProgress.progressLabel = _upgradeProgress.progress
            this.upgradeProgress.stepName = _upgradeProgress.stepName

            if (this.progressN) {
              clearTimeout(this.progressN)
              this.progressN = null
            }
            this.progressN = setTimeout(() => {
              this.getProUpgr()
            }, 1000)
          } else if (_upgradeProgress && _upgradeProgress.progress >= 100) {
            this.$store.dispatch('app/getVersion')
            this.isDisablStart = false
            clearTimeout(this.progressN)
            this.progressN = null
            clearTimeout(this.startUpgra)
            this.startUpgra = null
            this.upgradeProgress = {
              progress: 100,
              progressLabel: 100,
              stepName: ''
            }
          }
        }
      }).catch(_ => {
        if (this.upgradeProgress && this.upgradeProgress.progress < 100) {
          if (this.progressN) {
            clearTimeout(this.progressN)
            this.progressN = null
          }
          this.progressN = setTimeout(() => {
            this.getProUpgr()
          }, 1000)
        } else if (this.upgradeProgress && this.upgradeProgress.progress >= 100) {
          this.$store.dispatch('app/getVersion')
          this.isDisablStart = false
          clearTimeout(this.progressN)
          this.progressN = null
          clearTimeout(this.startUpgra)
          this.startUpgra = null
        }
      })
    },
    // 删除上传的文件
    clearfeilName() {
      this.feilName = null
      this.feilOnlyReadName = ''
      this.isDisablStart = false
      this.upgradeProgress = {
        progress: 0,
        stepName: ''
      }
      if (this.progressN) {
        clearTimeout(this.progressN)
        this.progressN = null
      }
      if (this.startUpgra) {
        clearTimeout(this.startUpgra)
        this.startUpgra = null
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.sys-upgrade-wrapper {
  .container-sys {
    background: #fff;
    padding: 20px;
    .sys_header_setting {
      padding-bottom: 5px;
      color: #616266;
      font-size: 14px;
    }
    .feil-sys-upgrade {
      position: relative;
      padding: 20px 0 20px 0;
      color: #616266;
      font-size: 14px;
      .input-container {
        position: relative;
        display: inline-block;
        margin-left: 5px;
        width: calc(100% - 370px);
        min-width: 180px;
        .close-upgrade-input {
          position: absolute;
          top: 11px;
          right: 10px;
        }
        .close-upgrade-input:hover {
          cursor: pointer;
        }
      }
      .sys-up-bu {
        float: right;
        .upload-demo {
          display: inline-block;
          width: 115px;
          margin-right: 10px;
          height: 40px;
          line-height: 40px;
          .select-file {
            margin-right: 12px;
          }
        }
        .start-sys-update {
          margin-top: -0px;
          height: 40px;
        }
      }
    }
    .upgrade-speed {
      color: #616266;
      font-size: 14px;
      .progress_contant {
        display: inline-block;
        width: calc(100% - 200px);
        margin-left: 5px;
      }
    }
    .versions-wrapper {
      color: #616266;
      font-size: 14px;
      margin-top: 20px;
    }
  }
}
</style>
